<template>
  <div>
    <div>
      <h2 class="tile">&nbsp;&nbsp;&nbsp;企业管理</h2>
    </div>
    <div style="margin-left: 120px">
      <el-form :inline="true" :model="business_name" class="demo-form-inline">
        <el-form-item label="企业名称：">
          <el-input
            v-model="business_name"
            placeholder="请输入要查询的企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchCarOrder">查询</el-button>
        </el-form-item>
        <el-button type="primary" @click="showDialog">添加</el-button>
      </el-form>
      
    </div>

    <div class="margin">
      <el-table :data="pageBean.beanList" style="width: 100%" height="400">
        <el-table-column prop="id" label="id" width="150"></el-table-column>
        <el-table-column
          prop="business_name"
          label="企业名称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="credit_code"
          label="信用代码"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="registered_capital"
          label="注册资本"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="legal_person"
          label="法定代表人"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="idcard"
          label="身份证"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="telephone"
          label="电话"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleLook(scope.$index, scope.row)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="企业信息" :visible.sync="dialogFormVisible">
        <el-descriptions
          class="margin-top"
          title="企业信息"
          :column="3"
          :size="size"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              企业id
            </template>
            {{ businessForm.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              企业名称
            </template>
            {{ businessForm.business_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              法定代表人
            </template>
            {{ businessForm.legal_person }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号码
            </template>
            {{ businessForm.telephone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              身份证
            </template>
            {{ businessForm.idcard }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              信用代码
            </template>
            {{ businessForm.credit_code }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              注册资本
            </template>
            {{ businessForm.registered_capital }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              账户类型
            </template>
            <el-tag size="small">{{ businessForm.bank_type }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              开户银行
            </template>
            <el-tag size="small">{{ businessForm.open_bank }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              所属支行
            </template>
            <el-tag size="small">{{ businessForm.sub_branch }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              银行账号
            </template>
            <el-tag size="small">{{ businessForm.account_num }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              用信机构
            </template>
            <el-tag size="small">{{ businessForm.credit_agency }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              用信品种
            </template>
            <el-tag size="small">{{ businessForm.credit_variety }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              用信余额
            </template>
            <el-tag size="small">{{ businessForm.credit_balance }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              逾期情况
            </template>
            <el-tag size="small">{{ businessForm.be_overdue }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              担保方式
            </template>
            <el-tag size="small">{{ businessForm.guarantee }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="添加" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="form">
          <el-form-item label="企业名称" :label-width="formLabelWidth">
            <el-input v-model="form.business_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="信用代码" :label-width="formLabelWidth">
            <el-input v-model="form.credit_code" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="注册资本" :label-width="formLabelWidth">
            <el-input v-model="form.registered_capital" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="法人代表" :label-width="formLabelWidth">
            <el-input v-model="form.legal_person" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
         <el-form :model="form">
          <el-form-item label="身份证" :label-width="formLabelWidth">
            <el-input v-model="form.idcard" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
         <el-form :model="form">
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.telephone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBusinessInfo"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- <div style="margin-left: 120px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 6, 7, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      ></el-pagination>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: "",
      pageBean: {
        beanList: [],
        pageIndex: 0,
        pageSize: 0,
        totalRecord: 0,
        totalpage: 0,
      },
      dialogFormVisible:false,
      business_name: "",
      pageIndex: 1,
      pageSize: 10,
      dialogFormVisible: false,
      businessForm: {
        id: "",
        business_name: "",
        credit_code: "",
        registered_capital: "",
        legal_person: "",
        idcard: "",
        telephone: "",
        bank_type: "",
        open_bank: "",
        sub_branch: "",
        account_num: "",
        credit_agency: "",
        credit_variety: "",
        credit_balance: "",
        be_overdue: "",
        guarantee: "",
      },
      form:{
        business_name: "",
        credit_code: "",
        registered_capital: "",
        legal_person: "",
        idcard: "",
        telephone: ""
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getBusinessInfo();
  },
  methods: {
    searchCarOrder() {
      this.getBusinessInfo();
    },
    showDialog(){
      this.dialogFormVisible = true;
    },
    closeDialog(){
      this.form = {};
      this.$refs["form"].clearValidate();
    },
    handleLook(index, row) {
      this.dialogFormVisible = true;
      console.log(row);
      (this.businessForm.id = row.id),
        (this.businessForm.business_name = row.business_name),
        (this.businessForm.credit_code = row.credit_code),
        (this.businessForm.registered_capital = row.registered_capital),
        (this.businessForm.legal_person = row.legal_person),
        (this.businessForm.idcard = row.idcard),
        (this.businessForm.telephone = row.telephone),
        (this.businessForm.bank_type = row.bank.bank_type),
        (this.businessForm.open_bank = row.bank.open_bank),
        (this.businessForm.sub_branch = row.bank.sub_branch),
        (this.businessForm.account_num = row.bank.account_num),
        (this.businessForm.credit_agency = row.businessCredit.credit_agency),
        (this.businessForm.credit_variety = row.businessCredit.credit_variety),
        (this.businessForm.credit_balance = row.businessCredit.credit_balance),
        (this.businessForm.be_overdue = row.businessCredit.be_overdue),
        (this.businessForm.guarantee = row.businessCredit.guarantee);
    },
    handleDelete(index, row) {
      this.open(row);
    },
    addBusinessInfo(){
      console.log("aaa");
      this.$axios.post("http://localhost:8800/businessInfo/add",this.form).then(resp=>{
        this.dialogFormVisible = false; 
        this.getBusinessInfo();      
      });
    },
    getBusinessInfo() {
      this.$axios
        .get("http://localhost:8800/businessInfo/getAll", {
          params: {
            business_name: this.business_name,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
          },
        })
        .then((resp) => {
          console.log(resp);
          this.pageBean.beanList = resp.data.data;
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getBusinessInfo();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getBusinessInfo();
    },
    open(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "http://localhost:8800/businessInfo/delete/" + row.business_name
            )
            .then((resp) => {
              this.getBusinessInfo();
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
div.margin {
  margin-left: 120px;
  margin-bottom: 30px;
}
.span123 {
  margin-left: -1000px;
  font-size: 25px;
  color: #409eff;
  font-family: "Sofia";
  font-weight: bold;
}
.tile {
  color: white;
  background: rgba(7, 7, 233, 0.685);
  width: 150px;
  height: 35px;
}
</style>